<template>
  <div class="course-schedule-config">
    <div class="title">私教排班</div>
    <div class="function">
      <div>
        <el-date-picker class="mr20" :picker-options="{ 'firstDayOfWeek': 1 }" @change="toWeek" v-model="selectWeek"
          type="week" format="yyyy 第 WW 周" placeholder="选择周">
        </el-date-picker>
      </div>
    </div>
    <el-table :data="doctorSchedules">
      <el-table-column align="center" fixed prop="name" label="教练"></el-table-column>
      <el-table-column align="center" label="时段">
        <template>
          <span class="b5">am</span><el-divider></el-divider><span class="b5">pm</span>
        </template>
      </el-table-column>
      <el-table-column align="center" v-for="(item, index) in weekDays" :key="index" :label="item.label">
        <template slot-scope="scope">
          <div v-if="scope.row[item.day]">
            <el-button v-if="scope.row[item.day][0]" :class="scope.row[item.day][0].book ? 'green' : ''"
              @click="editDSchedule(scope.row[item.day][0].pkId)">
              <span class="icon">{{ scope.row[item.day][0].status == 0 ? '私' : '团' }}</span>
            </el-button>
            <el-button class="noAppointment" @click="addDSchedule(scope.row.id, scope.row.name, item.day, 1)" v-else> +
            </el-button>
            <el-divider></el-divider>
            <el-button v-if="scope.row[item.day][1]" :class="scope.row[item.day][1].book ? 'green' : ''"
              @click="editDSchedule(scope.row[item.day][1].pkId)">
              <span class="icon1">{{ scope.row[item.day][1].status == 0 ? '私' : '团' }}</span>
            </el-button>
            <el-button @click="addDSchedule(scope.row.id, scope.row.name, item.day, 1)" class="noAppointment" v-else> +
            </el-button>
          </div>
          <div v-else>
            <el-button @click="addDSchedule(scope.row.id, scope.row.name, item.day, 0)" class="noAppointment"> +
            </el-button>
            <el-divider></el-divider>
            <el-button class="noAppointment" @click="addDSchedule(scope.row.id, scope.row.name, item.day, 1)"> +
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加课程" :visible.sync="dialogFormVisible">
      <el-form :model="courseForm" label-position="right" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="courseForm.title"></el-input>
        </el-form-item>
        <el-form-item label="封面图">
          <el-upload class="avatar-uploader" action="fakeaction" :show-file-list="false" :http-request="uploadFile"
            :before-upload="beforeAvatarUpload" multiple>
            <img v-if="courseForm.imgUrl" :src="courseForm.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model.number="courseForm.price"></el-input>
        </el-form-item>
        <el-form-item label="最大人数">
          <el-input v-model.number="courseForm.number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑课程" :visible.sync="uploadDialog">
      <el-form :model="uploadform" label-position="right" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="uploadform.title"></el-input>
        </el-form-item>
        <el-form-item label="封面图">
          <el-upload class="avatar-uploader" action="fakeaction" :show-file-list="false" :http-request="uploadFile2"
            :before-upload="beforeAvatarUpload" multiple>
            <img v-if="uploadform.imgUrl" :src="uploadform.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model.number="uploadform.price"></el-input>
        </el-form-item>
        <el-form-item label="最大人数">
          <el-input v-model.number="uploadform.number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadDialog = false">取 消</el-button>
        <el-button type="primary" @click="delCourse">删 除</el-button>
        <el-button type="primary" @click="editCourse">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGroupCourseList, addCourse, uploadFile, delCourse, getCourseDetail,editCourse } from "@/api/getData";
import { jsCurrentWeekdays } from "@/utils/datefu.js"
export default {
  name: 'DoctorSchedule',
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      uploadDialog: false,
      weekDays: [],
      doctorSchedules: [],
      workDates: "",
      workDate: "",
      selectWeek: "",
      currentDate: "",
      courseForm: {
        title: '',
        imgUrl: '',
        price: '',
        number: '',
        storeId: 3,
        storeName: '鼎升台球海龙大厦店',
        pkDate: '',
        coachId: '',
        coachName: '',
        timeFrame: '',
        businessHours: '06:00-12:00'
      },
      uploadform: {
        pid: '',
        title: '',
        imgUrl: '',
        price: '',
        number: '',
        storeId: 3,
        storeName: '鼎升台球海龙大厦店',
        pkDate: '',
        coachId: '',
        coachName: '',
        timeFrame: '',
        businessHours: '06:00-12:00'
      },
      pid:null
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    // this.currentDate = this.dateToStr();
    this.currentDate = '2023-05-01';
    this.getGroupCourseList()
  },
  methods: {
    //删除排课
    delCourse() {
      delCourse(this.pid).then((res) => {
        this.$message.success('删除成功');
        this.uploadDialog = false
        this.getGroupCourseList()
      });
    },
    //编辑排课
    editCourse() {
      editCourse(this.pid,this.uploadform).then((res) => {
        this.$message.success('修改成功');
        this.uploadDialog = false
        this.getGroupCourseList()
      });
    },
    //添加排课
    addCourse() {
      addCourse(this.courseForm).then((res) => {
        this.$message.success('添加成功');
        this.dialogFormVisible = false
        this.getGroupCourseList()
      });
    },
    //课程列表
    getGroupCourseList() {
      const params = {
        curDate: this.currentDate
      };
      getGroupCourseList(params).then((res) => {
        this.weekDays = res.data.weekDays
        this.doctorSchedules = res.data.doctorSchedules
        // this.logRecords = res.data.list
        // this.total = res.data.total
      });
    },
    uploadFile2(params) {
      const file = params.file;
      // 使用FormData传参数和文件
      var param = new FormData();
      // 文件
      param.append("file", file);
      uploadFile(param).then((res) => {
        this.uploadform.imgUrl = res.data
      });
    },
    uploadFile(params) {
      const file = params.file;
      // 使用FormData传参数和文件
      var param = new FormData();
      // 文件
      param.append("file", file);
      uploadFile(param).then((res) => {
        this.courseForm.imgUrl = res.data
      });
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    //选择周
    toWeek() {
      this.workDates = jsCurrentWeekdays(this.selectWeek)
      this.workDate = this.workDates[0].workDate
      this.currentDate = this.workDates[0].workDate
      this.getGroupCourseList()
    },
    //在Jquery里格式化Date日期时间数据
    dateToStr() {
      var datetime = new Date();
      var year = datetime.getFullYear();
      var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
      var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
      return year + "-" + month + "-" + date;
    },
    //设置排班
    addDSchedule(id, name, day, phase) {
      this.courseForm.coachId = id
      this.courseForm.coachName = name
      this.courseForm.pkDate = day
      this.courseForm.timeFrame = phase
      this.dialogFormVisible = true
    },
    editDSchedule(pid, id, name, day, phase) {
      console.log(pid, id, name, day, phase)

      getCourseDetail(pid).then((res) => {
        this.uploadform = res.data
        this.pid = pid
        this.uploadDialog = true
      });
      // this.uploadform.pid = pid
      // this.uploadDialog = true
      // this.uploadform.coachId = id
      // this.uploadform.coachName = name
      // this.uploadform.pkDate = day
      // this.uploadform.timeFrame = phase
    }
  }
}
</script>

<style lang="scss" scoped>
.course-schedule-config ::v-deep {
  .el-autocomplete {
    margin-right: 20px;
  }

  .cell {
    padding: 0;
  }

  .el-divider {
    margin: 10px 0;
  }

  .el-button {
    width: 137px;
    height: 42px;
    font-size: 18px;
    padding: 0;
    line-height: 42px;
    color: #8e8e8e;
    border: 2px solid #e3e3e3;
    background: rgba(242, 242, 242, 0.5);

    >span {
      display: block;
      width: 117px;
      height: 22px;
      line-height: 22px;
      margin: 0 auto;

      >span {
        height: 22px;
        line-height: 22px;
      }
    }
  }

  tr:nth-child(2n) td {
    background-color: rgba(237, 237, 237, 0.05);
  }

  tr:nth-child(2n-1) td {
    background-color: rgba(237, 237, 237, 0.3);
  }

  .b5 {
    display: inline-block;
    height: 42px;
    line-height: 42px;
    color: #b5b5b5;
  }

  .left {
    float: left;
    color: #256585;
  }

  .right {
    float: right;
    color: #0C9A8D;
  }

  .green {
    border-color: rgba(69, 152, 141, 0.3);
    background-color: rgba(12, 154, 141, 0.1);
  }

  .el-button.noAppointment {
    border-color: #f2f2f2;
    background: #fff;
    color: #f2f2f2;
    font-size: 34px;
  }

  .el-button.noAppointment:hover {
    border-color: #8e8e8e;
    color: #8e8e8e;
  }

  .icon,
  .icon1 {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 22px;
    margin-right: 6px;
    vertical-align: bottom;
    background-color: #256585;
  }

  .icon1 {
    background-color: #0C9A8D;
  }
}

.course-schedule-config {
  padding: 0 56px 160px;

  .title {
    font-size: 20px;
    color: #3c3c3c;
    margin: 40px 0;
  }

  .function {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}</style>